<template>
  <div class="site-notice">
    <div class="addprogram">
      <el-button type="primary" @click="addCard = true;addCardData={ status: 'unpublished' }">创建站内通知</el-button>
    </div>
    <subtable
      :table-label="noticeLabel"
      :table-data="listFilter.slice((currentpage-1)*pagesize,currentpage*pagesize)"
    >
      <el-table-column slot="first" :min-width="100" label="站内信通知标题" prop="title" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="handleTitleDialog(scope)">{{ scope.row.title }}</el-button>
        </template>
      </el-table-column>
      <el-table-column slot="button" :min-width="100" label="操作" prop="manage" align="center">
        <template slot-scope="scope">
          <el-dropdown
            split-button
            type="primary"
            trigger="click"
            @command="handleCommand($event,scope)"
            @click="handleClickEdit(scope)"
          >
            编辑
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-if="scope.row.statusStr === '未发布'" command="1">发布</el-dropdown-item>
              <el-dropdown-item command="2">删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </subtable>
    <pagination
      :total="total"
      :current-page="currentpage"
      :page-size="pagesize"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    />
    <!-- 创建公告 -->
    <el-dialog v-if="addCard" :visible.sync="addCard" :before-close="cancleSave" title="站内通知" width="590px">
      <el-form ref="createInfo" :model="addCardData" :rules="rules">
        <el-form-item :label-width="formLabelWidth" label="通知标题" prop="title">
          <el-input v-model="addCardData.title" style="width:400px"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="正文" prop="content">
          <tinymce v-model="addCardData.content" :height="200" style="width:400px;"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancleSave">取 消</el-button>
        <el-button type="primary" @click="handleSave">保 存</el-button>
        <el-button type="primary" @click="handleSave('direct')">直接发布</el-button>
      </div>
    </el-dialog>
    <!-- 查看标题 -->
    <el-dialog :visible.sync="titleDialog" title="全站站内通知" width="590px" class="check-title">
      <h2>{{ title }}</h2>
      <p style="margin-top:0">
        <span style="color:#8a8a8a">发布时间:</span>
        {{ createTimeStr }}
      </p>
      <p style="margin:0">{{ content }}</p>
    </el-dialog>
  </div>
</template>

<script>
import Subtable from '@/components/Eltable'
import Tinymce from '@/components/Tinymce'
import Pagination from '@/components/Pagination' // 分页组件
import { getNotificationList, addNotification, updateNotification, deleteNotification } from '@/api/operate/notification' // 数据接口
import { getTenantId, getUserId, getUserName } from '@/utils/auth'
export default {
  components: {
    Subtable,
    Tinymce,
    Pagination
  },
  data() {
    return {
      title: '',
      content: '',
      createTimeStr: '',
      titleDialog: false,
      activeName: '1',
      addCard: false,
      total: 0,
      currentpage: 1,
      pagesize: 10,
      addCardData: {
        title: '',
        content: ''
      },
      formLabelWidth: '120px',
      noticeLabel: [
        {
          label: '发布时间', width: '', prop: 'createTimeStr'
        }, {
          label: '创建时间', width: '', prop: 'createTimeStr'
        }, {
          label: '发布人', width: '', prop: 'releaseUserName'
        }, {
          label: '状态', width: '', prop: 'statusStr'
        }
      ],
      noticeData: [],
      listFilter: [],
      rules: {
        title: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    // 表格编辑传值
    handleClickEdit(scope) {
      this.addCard = true
      this.addCardData = Object.assign({}, scope.row)
    },
    // 弹窗更新数组数据
    handleSave(val) {
      this.$refs.createInfo.validate((valid) => {
        if (valid) {
          if (val === 'direct') {
            this.addCardData.status = 'published'
          }
          this.addCardData.tenantId = getTenantId()
          this.addCardData.releaseUserId = getUserId()
          this.addCardData.releaseUserName = getUserName()
          if (this.addCardData.id) {
            updateNotification(this.addCardData).then(res => {
              this.$notify({
                title: '成功',
                message: '修改成功！',
                type: 'success',
                duration: 2000
              })
              this.getData()
            })
          } else {
            addNotification(this.addCardData).then(res => {
              this.$notify({
                title: '成功',
                message: '新增成功！',
                type: 'success',
                duration: 2000
              })
              this.getData()
            })
          }
          this.addCard = false
          this.addCardData = { title: '', content: '', status: 'unpublished' }
        }
      })
    },
    cancleSave() {
      this.addCard = false
      this.addCardData = { title: '', content: '', status: 'unpublished' }
    },
    handleTitleDialog(scope) {
      this.titleDialog = true
      this.title = scope.row.title
      this.content = scope.row.content
      this.createTimeStr = scope.row.createTimeStr
    },
    // 修改状态 及 删除数据
    handleCommand(command, scope) {
      if (command === '1') {
        scope.row.status = 'published'
        updateNotification(scope.row).then(res => {
          this.$notify({
            title: '成功',
            message: '修改成功！',
            type: 'success',
            duration: 2000
          })
          this.getData()
        })
      } else if (command === '2') {
        this.$confirm('确认要删除此通知', '删除通知', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteNotification(scope.row.id).then(res => {
            this.$notify({
              title: '成功',
              message: '删除成功！',
              type: 'success',
              duration: 2000
            })
            this.getData()
          })
        }).catch(() => {
          this.$message.info('取消删除！')
        })
      }
    },
    handleSizeChange(val) {
      this.currentpage = 1
      this.pagesize = val.value
      if (this.pagesize >= 20) {
        scrollTo(50, 800)
      }
    },
    handleCurrentChange(val) {
      this.currentpage = val.value
      if (this.pagesize >= 20) {
        scrollTo(50, 800)
      }
    },
    getData() {
      getNotificationList().then(response => {
        this.noticeData = response.data.items.filter(item => {
          if (item.tenantId !== getTenantId()) return false
          return true
        })
        this.noticeData.map((item) => {
          if (item.status === 'unpublished') item.statusStr = '未发布'
          if (item.status === 'published') item.statusStr = '已发布'
          if (item.createTime) item.createTimeStr = new Date((item.createTime)).toLocaleString().replace(/[\u4e00-\u9fa5]/g, '')
        })
        this.total = this.noticeData.length
        this.listFilter = this.noticeData
      })
    }
  }
}
</script>

<style lang="scss">
.site-notice {
  padding: 14px 20px 0 20px;
  .addprogram {
    width: 100%;
    // padding-bottom: 40px;
    height: 36px;
    .el-button {
      float: right;
    }
  }
  .check-title {
    .el-dialog__body {
      padding-top: 0;
    }
  }
}
</style>
